<template>
	<view>
		<!-- 导航栏 -->
		<cu-custom bgColor="bg-gradual-red" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">图片详情</block>
		</cu-custom>
		<!-- 图片 -->
		<view class="image">
			<image :src="src" class="response" mode="widthFix" @tap="preImage"></image>
		</view>
		<!-- 图片说明 -->
		<view class="cu-bar bg-mauve shadow-blur solid-bottom">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>图片资料
			</view>
		</view>
		<view class="bg-mauve light padding-tb-sm">
			<view class="flex  p-xs solid-bottom margin-bottom-sm align-center ">
				<view class="flex-sub padding-xs margin-xs text-bold text-right">图片标题：</view>
				<view class="flex-treble pasdding-xs margin-xs text-left">{{title}}</view>
			</view>
			<view class="flex  p-xs solid-bottom margin-bottom-sm align-center ">
				<view class="flex-sub padding-xs margin-xs text-bold text-right">图片说明：</view>
				<view class="flex-treble pasdding-xs margin-xs text-left">{{remark}}</view>
			</view>
			<view class="flex  p-xs solid-bottom margin-bottom-sm align-center ">
				<view class="flex-sub padding-xs margin-xs text-bold text-right">文件名：</view>
				<view class="flex-treble pasdding-xs margin-xs text-left">{{fileName}}</view>
			</view>
			<view class="flex  p-xs solid-bottom margin-bottom-sm align-center ">
				<view class="flex-sub padding-xs margin-xs text-bold text-right">上传人：</view>
				<view class="flex-treble pasdding-xs margin-xs text-left">{{name}}</view>
			</view>
			<view class="flex  p-xs solid-bottom margin-bottom-sm align-center ">
				<view class="flex-sub padding-xs margin-xs text-bold text-right">共享种类：</view>
				<view class="flex-treble pasdding-xs margin-xs text-left">{{fileNature}}</view>
			</view>
			<view class="flex  p-xs solid-bottom margin-bottom-sm align-center ">
				<view class="flex-sub padding-xs margin-xs text-bold text-right">文件大小：</view>
				<view class="flex-treble pasdding-xs margin-xs text-left">{{size}}</view>
			</view>
		</view>
		<!-- 下载按钮 -->
		<view class="padding flex flex-direction">
			
			<!-- #ifdef H5 -->
			<button class="cu-btn bg-blue lg" @tap="h5download">下载</button>
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<button class="cu-btn bg-blue lg" @tap="download">下载</button>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		computed:mapState(['userName','pwd','hasLogin','server']),
		data() {
			return {
				src:'',
				title:'',
				remark:'',
				fileName:'',
				fileNature:'',
				size:'',
				name:''
			}
		},
		onLoad(e) {
			if(!this.hasLogin){
				uni.redirectTo({
					url:'./login'
				});
				return;
			}
			
			var fileid=e.fileid;
			var serverUrl=this.server.url;
			uni.request({
				url: serverUrl + 'app/findSysFileById',
				method: 'GET',
				sslVerify: false,
				data: {id : fileid},
				success: res => {
					var result= res.data;
					this.title= result.fileTitle;
					this.remark= result.fileRemark;
					this.fileNature = result.fileNature.name;
					this.fileName=result.fileName;
					this.size= result.fileSize;
					this.name= result.uploadsName;
					//this.src= serverUrl +"sysFile/app/download?fileUuid="+result.fileUuid;
					this.src= serverUrl +"media/shortImage/"+result.fileUuid+'.png';
					uni.downloadFile({
						url:serverUrl +"sysFile/app/download?fileUuid="+result.fileUuid,
						sslVerify:false,
						success: (res1) => {
							this.src=res1.tempFilePath;
						}
					})
				}
			});
		},
		methods:{
			download(){
				uni.downloadFile({
					url: this.src,
					success: res => {
						//console.log(res);
						 uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function () {
								uni.showToast({
									title: '文件下载成功，请在相册查看',
									icon: 'none'
								});
							}
						});
					}
				});
			},
			h5download(){
				//window.open(this.src);
				show(this.src);
			},
			preImage(){
				uni.previewImage({
					current:0,
					urls:[this.src]
				})
			},
			preImage1(){
				uni.navigateTo({
					url: './showImage?src='+this.src
				});
			}
		}
	}
	
	function show(src){
		var myFrame= document.createElement('iframe');
		myFrame.src = src;//服务器路径
		myFrame.style.display = 'none';
		document.body.appendChild(myFrame);
	}
</script>

<style>
</style>
